/*
 * Copyright (c) 2023 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.container {
    width: 100%;
    height: 100%;
    align-items: center;
    flex-direction: column;
    background-color: #F1F3F5;
}

.title-area {
    width: 100%;
    height: 7.2%;
    align-items: center;
}

.title {
    width: 86.7%;
    margin-top: 0.9%;
    margin-bottom: 1%;
    margin-left: 6.7%;
}

.title text {
    font-size: 30fp;
    color: #000000;
    text-align: left;
    line-height: 41vp;
    font-weight: 500;
}

.input-area, .user-area {
    width: 93.3%;
    height: 8.2%;
    background-color: #FFFFFF;
    border-radius: 16vp;
    align-items: center;
}

.input-area {
    margin-top: 1.5%;
}

.user-area image, .input-area image {
    width: 6.7%;
    aspect-ratio: 1;
    margin-left: 3.3%;
}

.user-area .input-label, .input-area .input-label {
    width: 33.1%;
    margin-left: 3.3%;
    align-items: center;
}

.user-area .input-div, .input-area .input-div {
    flex-grow: 1;
    width: 38.1%;
    align-items: center;
}

.input {
    background-color: #FFFFFF;
}

.select {
    caret-color: #FFFFFF;
}

button {
    width: 86.7%;
    height: 5.1%;
    margin-top: 25.1%;
    background-color: #0A59F7;
}

.gender-dialog {
    height: 27.7%;
    flex-direction: column;
    align-items: center;
}

.gender-dialog > text {
    width: 80%;
    height: 26%;
    font-size: 20fp;
    color: #182431;
    text-align: left;
    line-height: 28vp;
    font-weight: 500;
    text-align: left;
}

.gender-dialog > div {
    width: 80%;
    height: 22.4%;
}

.gender-dialog > div text {
    width: 13.3%;
    font-size: 16fp;
    color: #182431;
    text-align: left;
    line-height: 22vp;
    font-weight: 500;
}

.gender-dialog > div input {
    margin-left: 75.3%;
}

.gender-dialog > divider {
    width: 80%;
    color: #F8F8FF;
}

.gender-dialog .button {
    margin-top: 2.7%;
}

.gender-dialog .button text {
    width: 49%;
    margin-top: 6%;
    font-size: 16fp;
    color: #0A59F7;
    text-align: center;
    line-height: 22vp;
    font-weight: 500;
    justify-content: center;
}

.gender-dialog .button divider {
    color: #F8F8FF;
}

.hobby-dialog {
    height: 46.2%;
    flex-direction: column;
    align-items: center;
}

.hobby-dialog > text {
    width: 80%;
    height: 15.6%;
    font-size: 20fp;
    color: #182431;
    text-align: left;
    line-height: 28vp;
    font-weight: 500;
    text-align: left;
}

.hobby-dialog > div {
    width: 80%;
    height: 13.4%;
}

.hobby-dialog > div > text {
    width: 77.8%;
}

.hobby-dialog > .button {
    width: 80%;
    height: 11%;
    margin-top: 2.2%;
}

.hobby-dialog > .button text {
    width: 50%;
    font-size: 16fp;
    color: #0A59F7;
    text-align: center;
    line-height: 22vp;
    font-weight: 500;
}
